<template>
  <div>
    <el-card>
      <div class="bodyCard leftCard">
        <div class="search p-10">
          <el-input placeholder="请输入商品名称搜索" suffix-icon="el-icon-search" size="small" v-model="keywords1">
          </el-input>
        </div>
        <div class="item_list">
          <el-card class="item" v-for="(item,index) in shopList" :key="index" @click.native="checkShop(item)">
            <div class="imgBox">
              <img :src="item.shop_pic || shop_photo" alt="">
            </div>
            <div class="tipBox">
              <div class="title" :title="item.shop_name">{{item.shop_name}}</div>
              <div class="tips mt-10">
                <span>{{item.shop_price}}</span> 元/次</div>
            </div>
          </el-card>
        </div>
      </div>
      <div class="bodyCard rightCard">
        <div class="topTabs">
          <div class="tabList">
            <div 
            v-for="(item,index) in titleList" :key="index" 
            @click="activeTabs(index)" 
            :class="'itemTitle '+ (active==index?'active':'')" 
            :title="'单号: ' + item.order_sum">
              单号： {{item.order_sum}}
              <i class="el-icon-delete" @click="removeTabs(index)"></i>
            </div>
            <div class="itemTitle" v-show="titleList.length==0">第六感美发沙龙</div>
          </div>
          <div class="add" @click="addOrder">
            <div><i class="el-icon-plus"></i></div>
          </div>
        </div>
        <div class="tabBody">
          <div class="tableBody" v-if="titleList.length>0">
            <el-table
              :data="titleList[active].order_shop"
              stripe
              size="mini"
              highlight-current-row
              height="calc(100% - 80px)"
              :show-overflow-tooltip="true"
            >
              <template slot="empty"><el-empty description="暂未选中商品"></el-empty></template>
              <el-table-column type="index" width="40px" align="right"></el-table-column>
              <el-table-column label="商品" prop="shop_name" min-width="180px" ></el-table-column>
              <el-table-column label="售价 (元)" prop="shop_price" min-width="80px" align="right" header-align="right"></el-table-column>
              <el-table-column label="数量" prop="shop_sum" min-width="130px" align="center" header-align="center">
                <template #default="{row}">
                  <el-input-number v-model="row.shop_sum" @change="countPrice(row)" :min="1" label="选择数量" size="mini" style="width:110px;"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="小计 (元)" prop="shop_total" min-width="80px" align="right" header-align="right"></el-table-column>
              <el-table-column min-width="60px" align="center">
                <template #default="{row}">
                  <i class="el-icon-delete deleteIcon" @click="removeShop(row)"></i>
                </template>
              </el-table-column>
            </el-table>
            <div class="footer">
              <div class="ftLeft" @click="submitCount">
                <div class="icont">
                  <div><i class="el-icon-date"></i></div>
                  <div>结算</div>
                </div>
                <div class="money">
                  <div class="text">应收金额(元)</div>
                  {{titleList[active].order_total.toFixed(2)}}
                </div>
              </div>
              <div class="ftRight">
              </div>
            </div>
          </div>
          <el-empty v-show="titleList.length == 0" description="暂无订单, 创建一个订单吧"></el-empty>
        </div>
      </div>
    </el-card>

    <!-- 结账对话框 -->
    <el-dialog
      title="结账"
      :visible.sync="dialog"
      width="500px"
      @close="closeFunc"
      :close-on-click-modal="false"
    >
      <div slot="title">
        会员 :&nbsp;
        <el-select v-model="shopValue" placeholder="请选择会员" size="mini" @change="checkVip">
          <el-option
            v-for="item in vipList"
            :key="item.vip_id"
            :label="item.nickname"
            :value="item">
          </el-option>
        </el-select>
        <span class="balance">余额 : <span>{{balance || 0}}</span> 元</span>
      </div>
      <!-- 底部按钮区域 -->
      <div class="titleMoney">
        应收&nbsp;
        <span class="ml-5 mr-5 money" v-if="titleList.length>0">
          {{titleList[active].order_total.toFixed(2)}}
        </span>
        元
      </div>
      <div class="bodyTable">
        <div>
          <el-card v-for="(item, index) in payList" :key="item.pay_id" @click.native="activePaySty(index, item)">
            <div class="smallImg">
              <img :src="item.pay_img" alt="">
            </div>
            <div>{{item.pay_name}}</div>
            <div class="block" :style="'display:' + (index==activePay?'block;':'none;')">
              <img src="https://e.im5i.com/2021/07/10/R0goH.png" alt="">
            </div>
          </el-card>
        </div>
        <div class="mr-10 mt-10 ml-10">
          <div class="labels">
            <div class="mr-10">实收 : </div>
            <div>
              <el-input v-model.number="payMoney" size="mini" style="width:100px;" :disabled="payInfo" @change="giveChange"></el-input>
            </div>
          </div>
          <div class="labels">
            <div class="mr-10">待收 : </div>
            <div v-if="titleList.length>0">
              <el-input :value="titleList[active].order_total.toFixed(2)" size="mini" style="width:100px;" :disabled="true"></el-input>
            </div>
          </div>
          <div class="labels">
            <div class="mr-10">找零 : </div>
            <div>
              <el-input :value="payTotal.toFixed(2)" size="mini" style="width:100px;" :disabled="true"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="bodyTable">
        <el-radio v-model="sexRadio" :label="0" class="mr-20 ml-20"><i class="el-icon-s-custom"></i> 男顾客</el-radio>
        <el-radio v-model="sexRadio" :label="1" class="ml-20"><i class="el-icon-user-solid"></i> 女顾客</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="savaCount">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { newDate } from '@/utils/newDate'
import { shop } from '@/api/shop.js'
import { vip } from '@/api/vip.js'
import { order } from '@/api/order.js'
export default {
  data () {
    return {
      keywords1: '',
      keywords2: '',
      dialog: false,
      timer: null,
      active: 0,
      titleList: [],
      total: 0,
      newObj: {
        order_sum: '',
        order_shop: [],
        order_total: 0
      },
      activePay: 0,
      payMoney: 0, // 实收
      payTotal: 0, // 找零
      payList: [
        { pay_id: 0, pay_name: '现金支付', pay_img: 'https://e.im5i.com/2021/07/10/RroHy.png' },
        { pay_id: 1, pay_name: '微信支付', pay_img: 'https://e.im5i.com/2021/07/23/NBt0B.jpg' },
        { pay_id: 2, pay_name: '支付宝支付', pay_img: 'https://e.im5i.com/2021/07/23/NBv2z.jpg' },
        { pay_id: 3, pay_name: 'VIP余额支付', pay_img: 'https://e.im5i.com/2021/07/10/RrDBo.png' },
      ],
      payInfo: false,
      shopList: [],
      shop_photo: 'https://s.im5i.com/2021/06/22/aA9TC.jpg',
      vipList: [],
      shopValue: '',
      balance: 0,
      sexRadio: 0,
      xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          unit: '%',
          legendData: ['邮件营销', '联盟广告'],
          seriesData: [
            [820, 932, 901, 934, 1290, 1330, 1320],
            [100, 200, 300, 400, 1290, 1330, 1320]
          ]
    }
  },
  watch: {
    keywords1() {
      clearTimeout(this.timer)
      this.timer = setTimeout(_ => this.getShopList(),500)
    },
  },
  created () {

  },
  mounted () {
    this.getShopList()
    this.getVipList()
  },
  methods: {
    // 获取商品列表
    async getShopList() {
      console.log(this.keywords1);
      const { data: res } = await shop.list({ keywords: this.keywords1 })
      if (res.status !== 0) return this.$message.error(res.message)
      console.log(res)
      this.shopList = res.data
    },
    // 获取会员列表
    async getVipList() {
      console.log({ keywords: this.keywords })
      const { data: res } = await vip.list({ keywords: this.keywords2 })
      if (res.status !== 0) return this.$message.error(res.message)
      console.log(res)
      this.vipList = res.data
      // this.total = res.total
    },
    // 选择用户
    checkVip(val) {
      this.balance = val.money
    },
    // 解决表单刷新的问题
    goRefresh() {
      sessionStorage.setItem('titleList', JSON.stringify(this.titleList))
      this.titleList = JSON.parse(sessionStorage.getItem('titleList'))
      console.log(this.titleList);
      return this.checkOut()
    },
    // 总账单
    checkOut() {
      this.titleList[this.active].order_total = 0
      const list = this.titleList[this.active].order_shop
      for (let i = 0; i < list.length; i++) {
        this.titleList[this.active].order_total += list[i].shop_total
      }
    },
    // 选择商品
    checkShop(val) {
      // 判断是否有订单存在
      if (this.titleList.length === 0) {
        this.addOrder()
      }
      val.order_sum = this.titleList[this.active].order_sum // 给选中商品加入订单号
      // 判断是否已选中
      for (let i = 0; i < this.titleList[this.active].order_shop.length; i++) {
        if (this.titleList[this.active].order_shop[i].shop_id === val.shop_id) {
          this.titleList[this.active].order_shop[i].shop_sum++
          return this.countPrice(this.titleList[this.active].order_shop[i])
        }
      }
      // 未选的情况
      val.shop_sum = 1
      val.shop_total = val.shop_price
      this.titleList[this.active].order_shop.push(val)
      this.goRefresh()
    },
    // 创建订单
    addOrder() {
      if (this.titleList.length >= 5) return this.$message.info('创建的订单过多,请先解决已创建的订单')
      this.newObj.order_sum = newDate().year + newDate().month + newDate().day + newDate().hours + newDate().min + newDate().second
      this.titleList.push(this.newObj)
      this.goRefresh()
    },
    // tab页
    activeTabs(index) {
      this.active = index
    },
    // 选择支付
    activePaySty(index, val) {
      console.log(val);
      if (val.pay_id === 0) {
        this.payInfo = false
      } else {
        if (val.pay_id === 3 && this.shopValue === '') {
          return this.$message.info('请选择会员')
        }
        this.payInfo = true
        this.payMoney = this.titleList[this.active].order_total
      }
      this.activePay = index
    },
    // 小计 计算
    countPrice(val) {
      for (let i = 0; i < this.titleList[this.active].order_shop.length; i++) {
        if (this.titleList[this.active].order_shop[i].shop_id === val.shop_id) {
          this.titleList[this.active].order_shop[i].shop_total = val.shop_price * val.shop_sum
          return this.goRefresh()
        }
      }
    },
    // 删除 选中商品
    removeShop(val) {
      for (let i = 0; i < this.titleList[this.active].order_shop.length; i++) {
        if (this.titleList[this.active].order_shop[i].shop_id === val.shop_id) {
          this.titleList[this.active].order_shop.splice(i, 1)
          return this.goRefresh()
        }
      }
    },
    // 删除 选中tabs
    removeTabs(index) {
      this.titleList.splice(index, 1)
    },
    // 打开结算对话框
    submitCount() {
      // this.$message.success('结算')
      this.dialog = true
      this.payMoney = this.titleList[this.active].order_total
    },
    // 找零
    giveChange() {
      this.payTotal = this.payMoney - this.titleList[this.active].order_total
      if (this.payTotal < 0) {
        this.$confirm('实收金额 小于 待收金额?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).catch(err => err)
      }
    },
    // 保存结算对话框
    async savaCount() {
      if (this.payTotal < 0) {
        const confirmRsults = await this.$confirm('可能会亏钱, 是否继续操作?', '注意', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        // 确认删除 confirm；取消删除 cancel
        console.log(confirmRsults);
        if (confirmRsults !== 'confirm') return this.$message.info('已取消操作')
      }
      // 提交数据
      const parms = {
        ...this.titleList[this.active], // 订单信息以及总价
        vipInfo: this.shopValue || null, // vip信息 选中则有
        isVip: this.shopValue ? true : false, // true是 false否
        payMoney: this.payMoney || 0, // 实收
        activePay: this.activePay, // 支付方式 0现金 1微信 2支付宝 3余额
        sexRadio: this.sexRadio, // 顾客性别 0男 1女
        newDay: (newDate().year + '-' + newDate().month + '-' + newDate().day), // DATE 	3
        newHours: (newDate().hours + ':' + newDate().min + ':' + newDate().second) // TIME 	3
      }
      const { data: res } = await order.add(parms)
      if (res.status !== 0) return this.$message.error(res.message)
      console.log(res)
      console.log(parms);
      // 成功
      this.$message.success(`收款${this.payMoney}元`)
      this.removeTabs(this.active)
      this.dialog = false
      this.closeFunc()
    },
    // 重置
    closeFunc() {
      this.activePay = 0 // 选择支付
      this.payMoney = 0 // 实收
      this.payTotal = 0 // 找零
      this.shopValue = ''
      this.balance = 0
    },
  }
}
</script>

<style scoped lang="less">
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 5px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
}
/deep/.el-dialog{
  border-radius: 20px;
  .el-dialog__header{
    border-bottom: 1px solid #ddd;
    .balance{
      line-height: 28px;
      float:right;
      margin-right: 30px;
      color: #606266;
      font-weight: 500;
      span{
        color: #e6a23c;
        font-weight: 700;
      }
    }
  }
  .el-dialog__body{padding: 0;}
  .titleMoney{
    font-size: 20px;
    height: 100px;
    line-height: 100px;
    font-weight: 700;
    border-bottom: 1px solid #ddd;
    text-align: center;
    .money{
      font-size: 40px;
      color: #54A2D5;
    }
  }
  .bodyTable{
    .el-card{cursor: pointer;}
    border-bottom: 1px solid #ddd;
    padding: 20px;
    display: flex;
    >div{
      flex: 1;
      display: flex;
      flex-wrap: wrap;
    }
    .el-card{
      height: 60px;
      width: 100px;
      margin-right: 10px;
      margin-bottom: 5px;
      padding: 5px;
      box-sizing: border-box;
      .el-card__body{
        text-align: center;
        display: block;
        position: relative;
      }
      .smallImg{
        width: 30px;
        height: 30px;
        margin: 0 auto;
        img{
          height: 100%;
          widows: 100%;
        }
      }
      .block{
        position: absolute;
        top: -5px;
        left: -5px;
        height: 60px;
        width: 100px;
        background: rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        img{
          width: 30px;
          height: 30px;
          margin-top: 15px;
        }
      }
    }
    .labels{
      display: flex;
    }
  }
  .el-dialog__footer .el-button {
    width: 48%;
  }
}
.el-card{
  height: calc(100vh - 102px);
  /deep/.el-card__body{
    height: 100%;
    padding: 0;
    display: flex;
    .imgBox{
      width: 100px;
      padding: 10px;
      box-sizing: border-box;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .tipBox{
      width: calc(100% - 100px);
      padding:20px 10px;
      box-sizing: border-box;
      .title{
        text-overflow:ellipsis; 
        white-space:nowrap; 
        overflow:hidden; 
      }
      .tips{
        font-size: 12px;
        color: #606266;
        span{
          font-size: 16px;
          color: red;
        }
      }
    }
    .bodyCard{
      flex: 1;
      width: 50%;
    }
    .leftCard{
      background: #fdf6ec;
      .search .el-input__inner{
        border-radius: 20px;
      }
      .item_list{
        height: calc(100% - 52px);
        padding:0 10px;
        overflow-y: auto;
        box-sizing: border-box;
        .el-card{margin: 5px 0;}
        .item{
          display: inline-block;
          width: 32%;
          height: 100px;
          // background: burlywood;
          margin-right: 1%;
          &:nth-child(3n){ margin-right: 0px; }
          cursor: pointer;
          &:hover,&:focus{
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
            transform: scale(1.03);
          }
        }
        
      }
    }
    .rightCard{
      box-shadow: rgba(255, 255, 255, 0.2);
      // border-top: 2px solid #ddd;
      .topTabs{
        height: 40px;
        background: #ecf5ff;
        display: flex;
        .tabList{
          width: calc(100% - 60px);
          height: 100%;
          display: flex;
          box-sizing: border-box;
          .itemTitle{
            flex: 1;
            height: 100%;
            line-height: 40px;
            padding: 0 10px;
            padding-right: 30px;
            text-overflow:ellipsis; 
            white-space:nowrap; 
            overflow:hidden; 
            position: relative;
            cursor: pointer;
            color: #909399;
            i{
              position: absolute;
              top: 10px;
              right: 10px;
              display: none;
              &:hover{color: #409EFF;}
            }
            &:hover{
              color: #66A997;
              i{
                display: block;
                transition: all .5;
              }
            }
          }
          .active{
            border-top: 2px solid #66A997;
            background: #fff;
          }
        }
        .add{
          float: right;
          height: 100%;
          width: 60px;
          padding: 5px 0;
          text-align: center;
          // background: saddlebrown;
          >div{
            box-sizing: border-box;
            border-left: 1px solid #ddd;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            i{
              font-weight: 700;
              font-size: 18px;
              color: #606266;
            }
            &:hover i{
              color: #409EFF;
            }
          }
        }
      }
      .tabBody{
        height: calc(100% - 55px);
        .deleteIcon{
          font-size: 16px;
          cursor: pointer;
          &:hover{color: #409EFF;}
        }
        .tableBody{
          height: 100%;
          .footer{
            height: 80px;
            display: flex;
            >div{
              height: 100%;
            }
            .ftLeft{
              min-width: 35%;
              background: #409EFF;
              color: #fff;
              box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
              border-radius: 10px;
              padding:0 20px;
              box-sizing: border-box;
              display: flex;
              cursor: pointer;
              .icont{
                width: 30%;
                padding: 20px 0;
                div{
                  text-align: center;
                  font-size: 12px;
                  border-right: 1px solid #ddd;
                }
                i {font-size: 26px;}
                // div+div{margin-top: 10px;}
              }
              .money{
                width: 70%;
                padding:10px;
                font-size: 30px;
                .text{font-size: 12px;}
              }
            }
            .ftRight{
              width: 65%;
              padding:10px 20px;
              box-sizing: border-box;
            }
          }
        }
        .el-empty{
          height: calc(100% + 15px);
        }
      }
    }
  }
}
</style>

